<div>
    <el-form    label-width="100%">
        <el-form-item label="">
        </el-form-item>
    </el-form>
    <el-form :inline="true" slot="tools">
        <el-form-item >
            <el-input class="el-input--small"  v-model="filter" placeholder="请输入关键字">
                <el-button slot="append" icon="el-icon-search" @click="searchAll"  title="点击查询"></el-button>
            </el-input>
        </el-form-item >
        <el-form-item >
            <el-button v-if="!parentData"  type="primary" @click="edit(addRoom)"  icon="plus">新增</el-button>
        </el-form-item>
    </el-form>

    <div class="switch-card-list">
        <kf-card class="switch-card active" :width="460" :height="210" v-if="addRoom.edit">
            <div class="switch-card__header" slot="header">
                <div class="switch-card__title">
                    <span class="switch-card__name" >添加房间</span>
                </div>
                <div class="switch-card__append">
                    <span><span></span></span>
                </div>
            </div>
            <div class="switch-card__body">
                <div  class="card-item" >
                    <el-form ref="addRoom" :model="addRoom" label-width="80px">
                        <el-row type="flex"  justify="">
                            <el-col :span="12">
                                <el-form-item label="房间名称"  prop="roomName":rules
                                        ="[ {required: true, message: '房间名称不能为空'},
                                        {max:20,message:'长度不能超过20'}
                                    ]">
                                    <el-input v-model="addRoom.roomName"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="房号" prop="roomNum" :rules="[ {required: true, message: '房号不能为空'},
                                        {max:20,message:'长度不能超过20'}
                                    ]">
                                    <el-input v-model="addRoom.roomNum"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row type="flex"  justify="">
                            <el-col :span="12">
                                <el-form-item label="房间地址" class="el-form-item-thin" prop="roomPosition" :rules="[ {required: false, message: '房间名称不能为空'},
                                        {max:20,message:'长度不能超过20'}
                                    ]">
                                    <el-input v-model="addRoom.roomPosition"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item class="el-form-item-thin">
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </div>
            </div>
            <div class="switch-card__footer" slot="footer">
                <el-button type="text" icon="plus"  @click="addRooms(addRoom)"  size="small">添加</el-button>
                <el-button type="text" icon="close" @click="cancleEdit(addRoom)"  size="small">取消</el-button>
            </div>
        </kf-card>
        <kf-card v-for="room,index in rooms" :key="room" v-if="!parentData||room.roomStatus == '1'" @click="chose(room,index)" class="switch-card"  :width="room.edit?460:200" :height="room.edit?210:120" :class="{active: room.roomStatus == '1'&&chooseRoomId!==room.roomId,pointer:pointer,choose:chooseRoomId===room.roomId}" >
            <div class="switch-card__header" slot="header" @click="chose(room,index)">
                <div class="switch-card__title">
                    <span class="switch-card__name" v-text="room.roomName"></span>
                </div>
                <div class="switch-card__append">
                    <span>房号：<span v-text="room.roomNum">-</span></span>
                </div>
                <div class="switch-card__append" v-if="!parentData">
                    <el-button @click="deleteRoom(room,index)">
                        <span ><i class="el-icon-delete"></i></span>
                    </el-button>

                </div>
            </div>
            <div class="switch-card__body" @click="chose(room,index)" style="height: 100%">
                <div class="" v-if="!room.edit">
                    <span v-text="room.roomPosition"></span>
                </div>
                <div  class="card-item" v-if="room.edit">
                    <el-form :ref="room.roomId" :model="room" label-width="80px">
                        <el-row type="flex"  justify="">
                            <el-col :span="12">
                                <el-form-item label="房间名称" prop="roomName":rules
                                        ="[ {required: true, message: '房间名称不能为空'},
                                        {max:20,message:'长度不能超过20'}
                                    ]">
                                    <el-input v-model="room.roomName"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="房号" prop="roomNum" :rules="[ {required: true, message: '房号不能为空'},
                                        {max:20,message:'长度不能超过20'}
                                    ]">
                                    <el-input v-model="room.roomNum"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row type="flex"  justify="">
                            <el-col :span="12">
                                <el-form-item label="房间地址" class="el-form-item-thin" prop="roomPosition" :rules="[ {required: false, message: '房间名称不能为空'},
                                        {max:20,message:'长度不能超过20'}
                                    ]">
                                    <el-input v-model="room.roomPosition"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item class="el-form-item-thin">
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </div>
            </div>
            <div class="switch-card__footer" v-if="!parentData" slot="footer" @click="chose(room,index)">
                <el-switch @change="update(room)" v-model="room.roomStatus" v-if="!room.edit&&!parentData"
                           on-color="#15D592" off-color="#99A9BF" on-text="可用" on-value="1" off-text="不可用" off-value="0">
                </el-switch>
                <el-button type="text" icon="edit" @click="edit(room)" size="small" v-if="!room.edit&&!parentData">编辑</el-button>

                <el-button type="text" icon="edit"  size="small" v-if="room.edit" @click="update(room,true)">确定</el-button>
                <el-button type="text" icon="close"  size="small" @click="cancleEdit(room,true)" v-if="room.edit">取消</el-button>
            </div>
        </kf-card>
    </div>




</div>



